{extend name="public/layout"}
{block name="title"}相册{/block}
{block name="head"}
<style>

    .img-item {
        height: 3.552rem;
        background-size: cover;
        background-position: center center;
        position: relative;
        display: block;
        text-align: center;
    }

    .img-item img {
        width: 1.0464rem;
        margin-top: 1.1rem;
    }

    .img-title {
        text-align: center;
        color: #fff;
        position: absolute;
        bottom: 0;
        padding: 5px;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }



    .masker {
        position: fixed;
        left: 0;
        right: 0;
        top: 0.8448rem;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
        display: none;
    }

    .menus {
        background-color: #fff;
        display: none;
    }

    .menus img {
        width: 0.25680000000000003rem;
        display: none;
    }

    .menus .selected img {
        display: block;
    }

    .menus > .menu-item {
        font-size: 0.26880000000000004rem;
        padding: 0.24rem 0.26880000000000004rem;
    }

    .menus .selected {
        color: #13a7eb;

    }

    .toolbar .active .arrow-down {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
</style>
{/block}
{block name="content"}
<div class="toolbar-wrapper">
    <div class="toolbar bg-white border-b flex dock-top" id="top_toolbar">
        <div class="flex-con" data-value="0">
            <img src="/images/icons/clock.png" alt="">
            <span>全部</span>
            <i class="icon arrow-down"></i>
        </div>
        <div class="flex-con" data-value="1">
            <img src="/images/icons/class.png" alt="">
            <span>全部</span>
            <i class="icon arrow-down"></i>
        </div>
    </div>
</div>
<div class="masker" id="masker">
    <div class="menus" data-field="time">
        <div class="menu-item flex border-b selected" data-value="0">
            <div class="flex-con">全部</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
        <div class="menu-item flex border-b" data-value="1">
            <div class="flex-con">最近一周</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
        <div class="menu-item flex border-b" data-value="2">
            <div class="flex-con">最近一个月</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
        <div class="menu-item flex border-b" data-value="3">
            <div class="flex-con">最近半年</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
    </div>
    <div class="menus" data-field="type">
        <div class="menu-item flex border-b selected" data-value="0">
            <div class="flex-con">全部</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
        {volist name="video_types" id="vo"}
        <div class="menu-item flex border-b" data-value="{$vo.id}">
            <div class="flex-con">{$vo.title}</div>
            <img src="/images/icons/selected2.png" alt="">
        </div>
        {/volist}
    </div>
</div>
<div class="mt pb">
    <div class="img-list" id="img-list">
        {volist name="m" id="vo"}
        <a class="img-item mt" style="background-image: url('{$vo.img_src}')">
            <img src="/images/icons/play.png" alt="">
            <div class="img-title h2">
                {$vo.title}
            </div>
        </a>
        {/volist}
    </div>
</div>

<script type="text/html" id="template">
    {{#for(var i=0,len=d.data.length; i < len ; i++){}}
    <a class="img-item mt" style="background-image: url('{{d.data[i].img_src}}')">
        <img src="/images/icons/play.png" alt="">
        <div class="img-title h2">
            {{d.data[i].title}}
        </div>
    </a>
    {{#}}}
</script>
{:_js('js/loader.js')}
{:_js('static/laytpl/laytpl.js')}
<script>
    var loader = Loader.m1('img-list', 'template');
    var masker = $('#masker');
    var cur_type_value = -1;
    var is_showed = 0;
    $('#top_toolbar').on('click', '.flex-con', function () {
        var jq = $(this);
        jq.addClass('active').siblings().removeClass('active');
        var value = jq.data('value');
        var nodes = masker.children();
        if (value == cur_type_value) {
            if (is_showed) {
                masker.click();
            } else {
                masker.show();
                is_showed = 1;
            }
        } else {
            masker.show();
            is_showed = 1;
        }
        cur_type_value = value;
        nodes.eq(value).show();
        nodes.eq(1 - value).hide();
    });
    masker.on('click', function () {
        $(this).hide();
        if (cur_type_value >= 0) {
            $('#top_toolbar').children().eq(cur_type_value).removeClass('active');
        }
        is_showed = 0;
    }).on('click','.menu-item',function () {
        var jq= $(this);
        var menus = jq.closest('.menus');
        var field = menus.data('field');
        var value = jq.data('value');
        jq.addClass('selected').siblings().removeClass('selected');
        var title = jq.children().eq(0).text().trim();
        if(field == 'time'){ // 时间类别
            $('#top_toolbar').children().eq(0).find('span').text(title);
            loader.setParam('time',value).reloadData();
        }else {
            $('#top_toolbar').children().eq(1).find('span').text(title);
            loader.setParam('type',value).reloadData();
        }
    });
</script>
{/block}